<template>
  <div class="homeContainer">
    <div class="avatarContainer">
      <img class="avatar" :src="avatarUrl? avatarUrl : sex===1? '../../../static/defaultAvatar1.jpeg': '../../../static/defaultAvatar2.jpeg'" alt="">
      <div class="userLevelInfo">
        <div>
          <span class="homeUserName">{{name}}</span>
          <span>Lv.{{this.level}}</span>
        </div>
        <div class="levelBox">
          <el-progress :percentage="(experience/totalExperience) *100" :stroke-width="22" text-inside
            :format="formatpercentage" style="width: 90%;"></el-progress>
        </div>
        <div>金币50</div>
      </div>
      <el-button @click="toBasic">修改资料</el-button>
    </div>
    <div class="crossLine"></div>
    <div class="dayAwardContainer">
      <div class="header">
        <span>图标</span>
        <span>每日奖励</span>
      </div>
      <div class="list">
        <div class="iconItem">
          <img src="../../assets/logo.png" alt="">
          <span>每日登录</span>
          <span>5经验值到手</span>
        </div>
                <div class="iconItem">
          <img src="../../assets/logo.png" alt="">
          <span>每日回帖 15经验值/次</span>
          <span>{{replyTimes}}/5</span>
        </div>
                <div class="iconItem">
          <img src="../../assets/logo.png" alt="">
          <span>每日写作 20经验值/次</span>
          <span>{{writeTimes}}/3</span>
        </div>
      </div>
    </div>
    <div class="achievement">
      <div class="achHeader">
        <span>图标</span>
        <span>我的成就</span>
      </div>
      <div class="cardContainer">
        <el-card>
          成就值
        </el-card>
                <el-card>
          成就值
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import level from '../../utils/level.js'
export default {
  data () {
    return {
      level: 0,
      name: '',
      totalExperience: 0,
      experience: 0,
      replyTimes: 0,
      writeTimes: 0,
      avatarUrl: '',
      sex: 1
    }
  },
  methods: {
    formatpercentage () {
      return `${this.experience}/${this.totalExperience}`
    },
    async getActionInfo () {
      const {data: res} = await this.$http.get('/action')
      this.replyTimes = res.replyTimes
      this.writeTimes = res.writeTimes
      // this.replyTimes = data
    },
    toBasic () {
      this.$router.push('/profile/basicInfo')
    },
    async getUserInfo () {
      const userId = JSON.parse(window.sessionStorage.getItem('userInfo')).id
      const res = await this.$http.get(`/users/${userId}`)
      const experience = res.data.experience
      this.experience = experience
      this.sex = res.data.sex
      this.avatarUrl = res.data.avatar_url
      this.name = res.data.name
      const result = level(experience)
      this.totalExperience = result.totalExperience
      this.level = result.level
    }
  },
  created () {
    this.getUserInfo()
    this.getActionInfo()
  },
  mounted () {
  }
}
</script>

<style scoped lang="less">
.homeContainer{
  box-sizing: border-box;
  padding: 30px 40px;
}
.avatarContainer{
  box-sizing: border-box;
  width:100%;
  display: flex;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  .avatar {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    margin-right: 10px;
  }
}
.homeUserName{
  font-size: 18px;
  font-weight: 700;
  color: #222;
}
.userLevelInfo{
  display: flex;
  flex:1;
  flex-direction: column;
  .el-progress {
    margin: 5px 0;
  }
}
.crossLine{
  height: 1px;
  margin: 20px 0;
  background-color: #e5e9ef;
}
.dayAwardContainer{
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.list{
  display: flex;
  margin: 20px 0;
}
.iconItem{
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid #eee;
}
.list .iconItem:last-child{
  border-right: 0px;
}
.list .iconItem img{
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.cardContainer{
  display: flex;
}
.levelProgress{
  position: absolute;
  display: inline-block;
  left: 0px;
  top: 0px;
  background-color: red;
  height: 100%;
}
</style>
